<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>模态框</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .container {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 4px;
        padding: 20px;
      }

      .container .title {
        margin-bottom: 20px;
      }

      .container .btn {
        text-transform: uppercase;
        background: transparent;
        color: #222;
        letter-spacing: 2px;
        font-weight: 700;
        transition: all 0.3s linear;
        border: 2px solid #222;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        border-radius: 4px;
        font-size: 20px;
        padding: 8px 6px;
      }

      .container .btn:hover {
        color: #fff;
        background: #222;
      }

      .modal-overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.5);
        transition: all 0.3s linear;
        opacity: 0;
        z-index: 10;
      }

      .modal-overlay .modal-container {
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 4px;
        padding: 40px;
      }

      .modal-overlay .close-btn {
        position: absolute;
        right: 4px;
        top: 4px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s linear;
        font-size: 12px;
      }

      .modal-overlay .close-btn:hover {
        transform: scale(1.3);
        opacity: 0.8;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2 class="title">模态框(Modal)</h2>
      <button class="btn">打开模态框</button>
    </div>

    <div class="modal-overlay">
      <div class="modal-container">
        <h2>模态框内容</h2>
        <span class="close-btn">❌</span>
      </div>
    </div>

    <script>
      const $modal = document.querySelector(".modal-overlay");
      const $btn = document.querySelector(".btn");
      const $closeBtn = document.querySelector(".close-btn");
      $btn.addEventListener("click", function (e) {
        $modal.style.display = "flex";
        $modal.style.opacity = "1";
        // $modal.style.opacity = "0.5";
        // setTimeout(() => {
        //   $modal.style.opacity = "1";
        // }, 10);
      });
      $closeBtn.addEventListener("click", function (e) {
        $modal.style.opacity = "0";
        setTimeout(() => {
          $modal.style.display = "none";
        }, 300);
      });
    </script>
  </body>
</html>
